<template>
  <div class="flex-wrap-six">
    <div class="container">
      <swiper :options="swiperOption"
              ref="videoSwiper"
              @click="biddingshowchange"
      >
        <swiper-slide v-for="( item , index ) in 3" :key="index">
          <div class="content-loop">
            {{ item }}
            <div class="flex-inner">
              <div class="item-style" v-for="(v,index) in bidding" :key="index">
                <img :src="v.imgurl" alt />
                <div class="goodslist">
                  <div class="goodslist1">
                    <div class="goodslist1left hidden1" :title="v.name">{{v.name}}</div>
                    <div class="goodslist1right hidden1" :title="v.name1">{{v.name1}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <!--          循环指示点-->
        <div class="swiper-pagination"
             v-for="(item,index) in 3"
             :key="index"
             @click="biddingshowchange(item)"
             slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import axios from "@/config/http.js";
export default {
  name: "twoSwiper",
  components: {swiper, swiperSlide},
  data() {
    return {
      bidding:[],
      swiperOption: {
        autoplay: false,
        speed: 1000,
        loop: true,
        // observer: true,
        // observeParents: true,
        autoplayDisableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay
        allowTouchMove: false,
        pagination: {
          el: '.swiper-pagination',
          clickable: true////此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
        },

//滑动之后回调函数
        // on: {
        //   slideChangeTransitionEnd: () => {
        //     this.slideChangeTransitionEndHandle()
        //   },
        //   slideChangeTransitionStart: () => {
        //     this.slideChangeTransitionStartHandle()
        //   },
        //   //控制第一个slide切换
        //   // init: () => {
        //   //   this.initHandle()
        //   // }
        // }
      },
      showchangeone: 1,
    }
  },
  mounted() {
    this.getboatbidding()
  },
  methods: {
    //船舶竞价
    getboatbidding () {
      let param = new URLSearchParams();
      let that = this;
      param.append("uptype", 1);
      param.append("PageSize", 6);
      param.append("severalPages", that.showchangeone);
      ///user/indexAuctionList
      axios
          .post("/pc/user/findAuctionList", param)
          .then((res) => {
            that.bidding = res.data.data;
            this.swiperData = this.arrayChunk(that.bidding,6)
            console.log(this.swiperData,'cc')
            for (let i = 0; i < that.bidding.length; i++) {
              that.bidding[i].imgurl =
                  "https://gse-oss-pub.oss-cn-shenzhen.aliyuncs.com/" +
                  that.bidding[i].imgurl.split(",")[0];
            }
          })
          .catch((error) => {
            console.log(error)
            // this.$message.error("船舶竞价数据请求失败，请重试！");
          });
    },

    //size：每个数组几个值
    arrayChunk(array, size) {
      let data = []
      for (let i = 0; i < array.length; i += size) {
        data.push(array.slice(i, i + size))
      }
      return data
    },
    //点击竞价轮播图
    biddingshowchange (data) {
      console.log(123131)
      this.showchangeone = data + 1;
      this.getboatbidding();
    },
  }
}
</script>

<style scoped>
.flex-wrap-six {
  width: 1200px;
  display: flex;
  flex-flow: wrap;
}

.flex-inner {
  display: flex;
  flex-flow: wrap;
}

.item-style {
  width: 245px;
  height: 146px;
  background-color: #e5b3d0;
  margin: 50px;
}
.item-style img{
  width: 100%;
  height: 200px;
}
.container {
  width: 1200px;
}

.content-loop {
  width: 1200px;
  height: 800px;
  background-color: #ADCCC4;
}
</style>
